<template>
    <div class="app-container">
        <el-space class="mb-3">
            <el-button type="primary" plain icon="Plus" @click="DailyReportManageDetailRef.showAdd('新增巡查日报',)">
                新增
            </el-button>
        </el-space>
        <!-- 巡查日报管理 -->
        <el-table :data="tableData" v-loading="loading"
        @row-dblclick="handleRowDblClick"
            stripe
            :row-style="tableRowStyle"
        border>
            <el-table-column prop="unitId" label="巡查单位" />
            <el-table-column prop="adduserId" label="报告人员" />
            <el-table-column label="报告日期" align="center" prop="adddate" width="100">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.adddate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="reportyear" label="报告年份" />
            <el-table-column prop="reportnum" label="报告期数" />
            <el-table-column prop="reportallnum" label="总报告期数" />
            <el-table-column label="操作" fixed="right" width="200" align="center">
                <template #default="scope">
                    <el-button link size="small" type="primary"
                        @click="DailyReportManageDetailRef.showDetail(scope.row, '编辑巡查日报', 'Edit')">
                        <el-icon class="me-1">
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="primary" size="small" link
                        @click="DailyReportManageDetailRef.showDetail(scope.row, '巡查日报详情', 'See')">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                    <el-button link size="small" type="danger" @click="remove(scope.row)">
                        <el-icon class="me-1">
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getLists" />

        <DailyReportManageDetail ref="DailyReportManageDetailRef" @getDailyList="getLists" />
    </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()
import { ElMessageBox } from 'element-plus'
import { DAILYList, DAILYdelete } from "@/api/monitors/DailyReportManage.js";
import DailyReportManageDetail from "@/views/OnlineCheck/DailyReportManage/components/DailyReportManageDetail.vue";
import PageEnum from "@/enum/PageEnum.js";

const loading = ref(false)
const total = ref(0)
const DailyReportManageDetailRef = ref({})
const RoomTypeList = ref([])

const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: 10
})

const searchTime = ref([])
const queryParams = ref({
    // // 预案名称
    // planname: '',
    // // 预案类型
    // plantype: '',
    // params: {
    //     'beginTime': '',
    //     'endTime': ''
    // }
})

const tableData = ref([{}])

onMounted(() => getLists())
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const handleRowDblClick = (row) => {
    DailyReportManageDetailRef.value.showDetail(row, '巡查日报详情', 'See')
}
// 获取列表
const getLists = async () => {
    console.log(22313)
    loading.value = true
    const res = await DAILYList(queryParams.value, paging.value)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
}
// 删除

const remove = async (row) => {
    ElMessageBox.confirm('确定删除此信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        loading.value = true
        DAILYdelete(row.xcDaliyId).then(res => {
            getLists()
            loading.value = false
        })
    }).catch(() => {

    });
}
// 改变时间
const changeDateTimerHandle = (date) => {
    console.log(date)
    if (date) {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: date[0],
                endTime: date[1]
            }
        }
    } else {
        queryParams.value = {
            ...queryParams.value,
            params: {
                beginTime: '',
                endTime: ''
            }
        }
    }
    getLists()
}

// 重置搜索
const resetQueryParamsHandle = async (elForm) => {
    if (!elForm) return
    elForm.resetFields()
    searchTime.value = []
    queryParams.value.params.beginTime = ''
    queryParams.value.params.endTime = ''
    await getLists()
}
</script>

<style scoped lang="scss">
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>